<template>
  <a-form
    :model="formState"
    ref="formDataRef"
    name="basic"
    :label-col="{ style: 'width:80px' }"
    :wrapper-col="{ style: 'calc(100% - 80px)' }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <a-spin :spinning="loading">
      <a-form-item label="常量代码" name="code" :rules="[{ required: true, message: '请填写常量代码!' }]">
        <a-input v-model:value="formState.code" :maxlength="200" @keyup="validateZhInputHandle($event, formState, ['code'])" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="常量名称" name="name" :rules="[{ required: true, message: '请填写常量名称!' }]">
        <a-input v-model:value="formState.name" :maxlength="200" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-input v-model:value="formState.remark" :maxlength="200" placeholder="请输入" />
      </a-form-item>
      <div class="title">键值对</div>
      <a-row :gutter="16">
        <template v-for="(item, index) in formState.itemList" :key="index">
          <a-col :span="10">
            <a-form-item label="属性名称" :name="['itemList', index, 'name']" :rules="[{ required: true, message: '请填写属性名称!' }]">
              <a-input v-model:value="item.name" :maxlength="200" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item label="属性值" :name="['itemList', index, 'code']" :rules="[{ required: true, message: '请填写属性值!' }]">
              <a-input v-model:value="item.code" :maxlength="200" placeholder="请输入" @keyup="validateZhInputHandle($event, item, ['code'])" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-button style="margin-right: 8px" @click="addHandle"><plus-outlined /></a-button>
            <a-button v-if="(formState.itemList as []).length > 1" type="danger" @click="removeHandle(index)"><minus-outlined /></a-button>
          </a-col>
        </template>
      </a-row>
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="submit-btn-form-item">
        <a-button type="primary" html-type="submit">确定</a-button>
        <a-button @click="resetHandle">取消</a-button>
      </a-form-item>
    </a-spin>
  </a-form>
</template>

<script lang="ts" setup>
import { PlusOutlined, MinusOutlined } from "@ant-design/icons-vue";
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import { getLookupItemByCodeApi } from "@/api/configCenter/dataDictManagement";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: Base.GeneraDataType;
    type: number;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", blo: boolean): void;
  (e: "submit"): void;
}>();
const { visible, passData, type } = toRefs(props);
const { formState, formDataRef, loading } = InitHook();
const { onFinish, onFinishFailed, resetHandle, addHandle, removeHandle, validateZhInputHandle, resetFields } = OperationHook({
  formDataRef,
  emit,
  type,
  passData,
  formState
});
// 初始化
const init = () => {
  if (type.value === 2) {
    Object.assign(formState, passData.value);
    loading.value = true;
    getLookupItemByCodeApi({ parentCode: formState.code as string })
      .then((res: any) => {
        const { code, data } = res;
        if (code === 200) {
          formState.itemList = data || [];
        }
      })
      .finally(() => (loading.value = false));
  }
};
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    } else {
      formDataRef.value.clearValidate();
      resetFields();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
.title{
  font-weight: 600;
  font-size: 16px;
}
</style>
